<template>
  <view class="contain">
    <!-- 基本信息 -->
	<view class="top-bg">农污监测与运维管理</view>
    <!-- 分类导航区域 -->
	<view v-if="role===1"  class="pos-box">
		<view class="Basic-infor">
			<view class="avatar" @click="toUserCenter()">
				<view class="">
					<u-avatar v-if="avatar" :src="avatar" size="120"></u-avatar>
					<image v-else class="img-avatar" src="../../static/yunwei/avatar.png" mode=""></image>
				</view>
				
				</view>
			<view class="location">{{loc}}</view>
			<view style="display: flex;justify-content: space-between;align-items: center;width: 100%;">
				<view class="cun-name">{{villageDetail.villageName||''}}
				<van-tag class="marClass" v-if="villageDetail.villageType == 2" color="#E5EEFF" text-color="#3C8AFF">自然村</van-tag>
				<van-tag class="marClass" v-if="villageDetail.villageType == 1" color="#D5EFE7" text-color="#74CDAF">行政村</van-tag>
				<!-- <view class="numberNo">编号:{{villageDetail.villageCode||''}}</view> -->
				</view>
				<view class="selectName" @click="show=true">{{selectedValue}}
				<image class="arrow" src="../../static/icon/icon-back-arrow.png" mode=""></image>
				</view>
			</view>
			<view class="flexBox">
				<view class="flexItem">
					<view class="itemName"><image class="imgIcon" src="../../static/icon/fwnh.png" mode="">服务农户</image></view>
				    <view class="itemVal">{{villageDetail.farmersNum||''}}<text>户</text></view>
				</view>
				<view class="flexItem">
					<view class="itemName"><image class="imgIcon" src="../../static/icon/zdsl.png" mode="">终端数量</image></view>
				    <view class="itemVal">1<text>个</text></view>
				</view>
				<view class="flexItem">
					<view class="itemName"><image class="imgIcon" src="../../static/icon/sbsl.png" mode="">设备数量</image></view>
				    <view class="itemVal">{{villageDetail.equNum||''}}<text>个</text></view>
				</view>
				<view class="flexItem">
					<view class="itemName"><image class="imgIcon" src="../../static/icon/gwcd.png" mode="">管网长度</image></view>
				    <view v-if="villageDetail.pipLine" class="itemVal">{{villageDetail.pipLine}}<text>m</text></view>
					<view v-else class="itemVal"><text>暂无数据</text></view>
				</view>
				<view class="flexItem" style="margin-right: 0;">
					<view class="itemName"><image class="imgIcon" src="../../static/icon/ywqy.png" mode="">运维企业</image></view>
				    <view class="itemVal"><text>{{villageDetail.company||''}}</text></view>
				</view>
			</view>
			<u-picker :show="show" :columns="[columns]" @confirm="confirm" keyName="name"
			@cancel="show=false"></u-picker>
		</view>
		<view class="nav-list">
		  <view v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)" class="navItem" 
		  :class="{navItem1: i == 1,navItem2: i == 2,navItem3: i == 3}">
				  <view style="width: 42%;">{{item.name}}</view>
			  	<image :src="item.image_src2" class="nav-img2"></image>
		  </view>
		</view>
		<view class="bottom">
			<view class="title">工单总览</view>
		<view class="gdzlBox" >
		 <view class="gdzlItem" v-for="(item, i) in navList2" :key="i" @click="navClickHandler2(item)"
		:class="{   gdzlItem1: i == 0,gdzlItem2: i == 1}">
		 	<view class="">{{item.name}}</view>
			<view class="number">{{item.val}}</view>
			<view v-if="i==2" class="dcl">待处理</view>
		 </view>
	<!-- 	 <view class="gdzlItem bg2">
		 	<view class="">全部办结</view>
		 			<view class="number">100</view>
		 </view>
		 <view class="gdzlItem bg3">
		 	<view class="">全部待办</view>
		 			<view class="number">100</view>
					<view class="dcl">待处理</view>
		 </view> -->
		</view>
		</view>
	</view>
  <!-- 管理端首页 -- 地图（处理后判断展示 -->
  <map v-else class="mapContainer"></map>
	</view>
</template>
<script>
    import map from './components/map.vue'
	import {getVillageLocation,getVillageByUser,getVillageDetail} from '@/api/area';
	import {getWorkOrderNum} from '@/api/yunwei.js';
	import {getUserInfo} from '@/api/system.js';
	import {getNodePath} from '@/utils/treeOperate';
// import ww from '../../static/icon/ywdk-bg.png';
import { get_token } from '@/auth/token';
export default {
  components:{map},
  data() {
    return {
		role:'',
		userName:'',
		avatar:'',
		loc:'',
		location:{},
		villageDetail:{},
		villageId:'',
		show:false,
		selectedValue:'',
		queryParams: {
			pageNo: 1,
			pageSize: 100
		},
		columns: [],
		terminalName:'',
      navList: [
        {
          name: '日常运维',
          image_src: '../../static/icon/rcyw-bg.png',
		  image_src2: '../../static/icon/rcyw-icon.png',
          url: `/subpack_YunWei/dailyYunWei/index`,
        },
        {
          name: '工单处理',
         image_src: '../../static/icon/gdcl-bg.png',
         image_src2: '../../static/icon/gdcl-icon.png',
          url: '/subpack_TerminalDevice/workOrder/index',
        },
        {
          name: '水质检测',
          image_src: '../../static/icon/szjc-bg.png',
          image_src2: '../../static/icon/szjc-icon.png',
          url: `/subpack_TerminalDevice/waterQualityTesting/index`,
        },
		{
		  name: '有限空间作业',
		  image_src: '../../static/icon/ywdk-bg.png',
		  image_src2: '../../static/icon/ywdk-icon.png',
		  url: `/subpack_YunWei/yxkjzy/index`,
		}
      ],
	  navList2: [
	    {
	      name: '全部工单',
		  val:0,
	      image_src: '../../static/icon/qbgd-bg.png',
	      url: `/subpack_TerminalDevice/allWorkOrder/index?type=1`,
	    },
	    {
	      name: '全部办结',
		  val:0,
	      image_src: '../../static/icon/qbbj-bg.png',
	      url: `/subpack_TerminalDevice/allWorkOrder/index?type=2`,
	    },
	    {
	      name: '全部待办',
		  val:0,
	     image_src: '../../static/icon/qbdb-bg.png',
	     image_src2: '../../static/icon/dcl-bg.png',
	      url: `/subpack_TerminalDevice/allWorkOrder/index?type=3`,
	    }
	  ]
    };
  },
  computed: {
    // 角色标识  1--运维人员  2--管理人员
    // role() {
    //   return uni.getStorageSync('role')
    // }
  },
  onLoad(options) {
	  if(options.id){
		  this.villageId=options.id
		  this.getVillageDetail()
		  this.getWorkOrderNum()
		  uni.setStorageSync('villageId',options.id) 
		  this.columns=uni.getStorageSync('columns')
		  console.log(options.id,'8.25555555555555555');
	  }else{
		  this.getVillageByUser()
		  
	  }
  },
  onShow() {
    this.init();
	this.role=uni.getStorageSync('role')
	this.avatar=uni.getStorageSync('avatar')
	// this.getUserInfo()
  },
  mounted() {
  	let that = this
  	uni.getLocation({
  	  type: 'gcj02',
  	  success: function(res) {
  	    // console.log('当前位置的经度：' + res.longitude);
  	    // console.log('当前位置的纬度：' + res.latitude);
  	    that.location = res
  	    that.getVillageLocation()
		uni.setStorageSync('location',res)
  	  }
  	});
  },
  methods: {
	  toUserCenter(){
		  uni.navigateTo({
		    url: `/pages/mine/index?name=${this.villageDetail.company}`,
		  });
	  },
	  async getUserInfo(){
	  		 const res=await getUserInfo() 
	  		// this.avatar=res.data.result.userInfo.avatar
	  },
	  async getVillageLocation(){
		 const res=await getVillageLocation({
          latitude:this.location.latitude,
          longitude:this.location.longitude,
        }) 
		this.loc=res.data.data
		console.log(res,'6.3000');
	  },
	  async getVillageByUser(){
		  this.userName=uni.getStorageSync('username')
	  		 const res=await getVillageByUser({user:this.userName}) 
			 if(res.data.code==500) return
	  		console.log(res.data,'6.3000user');
			if(res.data.data.length!==0){
				this.columns=res.data.data
				this.selectedValue=res.data.data[0].name
				this.villageId=res.data.data[0].id
				this.getVillageDetail()
				this.getWorkOrderNum()
				uni.setStorageSync('villageId',res.data.data[0].id) 
				uni.setStorageSync('columns',res.data.data)
			}
			
	  },
	  async getVillageDetail(){
	  		 const res=await getVillageDetail({villageId:this.villageId}) 
	  		// console.log(res.data,'6.3000Detail');
			this.villageDetail=res.data.data
			this.selectedValue=res.data.data.villageName
			uni.setStorageSync('terminalId',res.data.data.terminalId)
			 uni.setStorageSync('terminalName',res.data.data.terminalName)
	  },
	  async getWorkOrderNum(){
	  		 const res=await getWorkOrderNum({villageId:this.villageId})
			  let num=res.data.data
			  this.navList2[0].val=num.allNum
			  this.navList2[1].val=num.handleNum
			  this.navList2[2].val=num.unHandleNum
			 // console.log(res.data,'6.3000WorkOrderNum');
	  },
	  confirm(e) {
		  uni.setStorageSync('villageId', e.value[0].id) 
		  this.villageId=e.value[0].id
	  		this.selectedValue = e.value[0].name
			this.getVillageDetail()
			this.getWorkOrderNum()
	  		//关闭选择器
	  		this.show = false
	  	},
    init() {
      const token = get_token();
      if (!token) {
        // 无token时进入小程序，重定向到登录页
        uni.navigateTo({
          url: '/pages/login/login',
        });
        return;
      }
    },
    // nav-item 项被点击时候的事件处理函数
    navClickHandler(item) {
      if (!item.url) {
        this.$refs.uToast.show({
          message: '正在开发中',
          type: 'warning',
          complete() {
          },
        });
      } else {
        uni.navigateTo({
          url: item.url,
        });
      }
    },
	navClickHandler2(item) {
	  if (!item.url) {
	    this.$refs.uToast.show({
	      message: '正在开发中',
	      type: 'warning',
	      complete() {
	      },
	    });
	  } else {
	    uni.navigateTo({
	      url: item.url,
	    });
	  }
	},
  },
};
</script>
<style lang="scss" scoped>
.mapContainer{
  position: absolute;
  top: 180rpx;
  width: 100%;
}
.contain {
  // padding: 32rpx;
  // position: relative;
  width: 100vw;
.top-bg{
	width: 100%;
	height: 330rpx;
	background: #2769F7;
	border-radius: 0rpx 0rpx 140rpx 140rpx;
	padding-top: 104rpx;
	text-align: center;
	font-weight: 600;
	font-size: 40rpx;
	color: #FFFFFF;
	letter-spacing: 4rpx;
}
.pos-box{
	position: absolute;
	top: 180rpx;
	.Basic-infor{
		// width: 100%;
		height: 430rpx;
		margin-top: 20rpx;
		background: url("@/static/icon/basic-bg.png") no-repeat center;
		background-size: 100% 100%;
		padding: 30rpx 64rpx;
		position: relative;
		.avatar{
			position: absolute;
			top: -40rpx;
			left: 62rpx;
			width: 140rpx;
			height: 70rpx;
			border-radius: 70rpx 70rpx 0 0;
			background: #a8ccfb;
			display: flex;
			justify-content: center;
			padding-top: 11rpx;
			.img-avatar{
				width: 120rpx;
				height: 120rpx;
			}
		}
		.location{
			height: 110rpx;
			
		}
		.cun-name{
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 36rpx;
			letter-spacing: 2rpx;
			.numberNo{
				width: 250rpx;
				overflow: hidden;
				white-space: nowrap;
			    padding: 0 12rpx;
				height: 40rpx;
				line-height: 40rpx;
				background: #94BCF8;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-left: 16rpx;
				
			}
			.marClass {
			  margin-left: 16rpx;
			}
		}
		.selectName{
			// width: 120rpx;
			height: 44rpx;
			padding: 0 16rpx;
			line-height: 44rpx;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			border: 1rpx solid #FFFFFF;
			background: #f5f9fe;
			font-weight: 400;
			font-size: 24rpx;
			color: #6C9AFE;
			letter-spacing: 2rpx;
			.arrow{
				width: 15rpx;
				height: 9rpx;
				vertical-align: middle;
				margin-left: 6rpx;
			}
		}
		.flexBox{
			display: flex;
			flex-wrap: wrap;
			margin-top: 38rpx;
			.flexItem{
				margin-right: 48rpx;
				font-weight: bold;
				color: #686868;
				margin-bottom: 30rpx;
				
				.itemName{
					font-size: 28rpx;
					margin-bottom: 6rpx;
					letter-spacing: 3rpx;
				}
				.itemVal{
					margin-left: 32rpx;
					text{
						font-size: 24rpx;
						white-space: nowrap;
					}
				}
				
				.imgIcon{
					width: 22rpx;
					height: 22rpx;
					vertical-align: middle;
					margin-right: 12rpx;
				}
			}
		}
	}
}
  .nav-list {
    display: flex;
    // width: 100%;
	padding: 0 32rpx;
    flex-wrap: wrap;
    justify-content: space-between;
    .navItem {
      width: 48.5%;
      height: 150rpx;
      margin-bottom: 16rpx;
	  background: url("@/static/icon/rcyw-bg.png") no-repeat center;
	  background-size: 100% 100%;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	  font-weight: 800;
	  color: #3F9F99;
	  }
	  .navItem1 {
	    background: url("@/static/icon/gdcl-bg.png") no-repeat center;
	    background-size: 100% 100%;
	  		color: #E58B1E;
	  }
	  .navItem2 {
	    background: url("@/static/icon/szjc-bg.png") no-repeat center;
	    background-size: 100% 100%;
	  		color: #60569B;
	  }
	  .navItem3 {
		  background: url("@/static/icon/ywdk-bg.png") no-repeat center;
	    background-size: 100% 100%;
		 color: #6B80C8;
	  }
	  .nav-img2 {
	    height: 86rpx;
	    width: 86rpx;
		margin-left: 40rpx;
		vertical-align: middle;
	  }
    }
  .bottom {
   // width: 647rpx;
   // height: 234rpx;
   background: #FFFFFF;
   border-radius: 10rpx 10rpx 10rpx 10rpx;
   margin: 0 32rpx;
   padding: 22rpx 0;
   font-weight: 800;
   font-size: 32rpx;
   color: #4A4A4A;
   margin-top: 16rpx;
   .title{
	   margin-left: 28rpx;
	   margin-bottom: 16rpx;
   }
   .gdzlBox{
	   display: flex;
	   justify-content: space-between;
	    
	   .gdzlItem{
		   position: relative;
		   width: 158rpx;
		   height: 100rpx;
	   	   padding:30rpx 36rpx;
		   background: url("@/static/icon/qbdb-bg.png") no-repeat center;
		   background-size: 100% 100%;
		   font-size: 24rpx;
		   color: #747474;
		   .number{
			   font-size: 44rpx;
			   color: #4A4A4A;
			   margin-top: 8rpx;
		   }
		   .dcl{
		   				   width: 60rpx;
		   				   height: 26rpx;
		   				   line-height: 26rpx;
		   				   text-align: center;
		   				   position: absolute;
		   				   top: 16rpx;
		   				   right: 16rpx;
		   				   background: url("@/static/icon/dcl-bg.png") no-repeat center;
		   				   background-size: 100% 100%;
		   				   font-weight: 400;
		   				   font-size: 14rpx;
		   				   color: #FFFFFF;
		   }
	   }
	   .gdzlItem1{
		   background: url("@/static/icon/qbgd-bg.png") no-repeat center;
		   background-size: 100% 100%;
	   }
	   .gdzlItem2{
	   		   background: url("@/static/icon/qbbj-bg.png") no-repeat center;
	   		   background-size: 100% 100%;
	   }
   }
   
  }
}
</style>
